<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>

			<!-- 作者信息 -->
			<view class="author-section" :style="{ marginTop: safeTop + 'px' }">
				<image :src="workDetail.avatar" class="author-avatar" mode="aspectFill"
					@click="goToDesignerProfile(workDetail.uid)" />
				<view class="author-info" @click="goToDesignerProfile(workDetail.uid)">
					<text class="author-name">{{ workDetail.nickname }}</text>
				</view>
				<view v-if="currentUId!=workDetail.uid" :class="workDetail.userFollow ? 'followed-btn' : 'follow-btn'"
					@click="toggleFollow">
					<text v-if="!workDetail.userFollow" class="follow-text">关注</text>
					<text v-else class="followed-text">已关注</text>
				</view>
			</view>
		</view>

		<view :style="{ marginTop: contentTop + 'px' }"></view>
		<scroll-view scroll-y class="content">

			<!-- 作品信息 -->
			<view class="work-section">
				<!-- 只有图片加载完成后才显示 Swiper -->
				<swiper v-if="imagesLoaded" class="work-swiper" :style="{ height: swiperHeight + 'rpx' }"
					:indicator-dots="displayImages.length > 1" :autoplay="false" :interval="3000" :duration="500"
					:circular="false">
					<swiper-item v-for="(img, index) in displayImages" :key="index" class="swiper-item-container">
						<image :src="img" class="work-image" mode="widthFix" @load="onImageLoad($event, index)"
							@error="onImageError(index)" />
					</swiper-item>
				</swiper>

				<!-- 加载中状态 -->
				<view v-else class="work-swiper-placeholder">加载中...</view>

				<view class="work-info">
					<text class="work-title">{{ workDetail.title }}</text>
					<text class="work-description">{{ workDetail.content }}</text>
					<text v-if="workType==1" class="work-time">{{ workDetail.add_time }}</text>
					<view v-if="workType!=1" style="display: flex;justify-content: space-between;align-items: center;">
						<text class="work-time" style="flex: 1;">{{ workDetail.add_time }}</text>
						<image v-if="workDetail.status != 2" 
							:src=" workDetail.userWant ? '/static/base/index/want_active.png' : '/static/base/index/want.png'"
							class="like-icon" mode="aspectFit" />
						<text @click="setWant(true)" v-if="!workDetail.userWant && workDetail.status != 2" class="work-time">想要</text>
						<text @click="setWant(false)"v-if="workDetail.userWant && workDetail.status != 2"  class="work-time">不想要</text>
					</view>
						
				</view>
			</view>

			<!-- 评论区域 -->
			<view class="comments-section">
				<view class="section-header">
					<text class="section-title">评论 ({{ commentTotal }})</text>
				</view>

				<view class="comment-list">
					<view v-for="(comment, index) in commentList" :key="comment.id" class="comment-item">
						<image :src="comment.common_avatar" class="comment-avatar" mode="aspectFill"
							@click="goToDesignerProfile(comment.uid)" />
						<view class="comment-content">
							<view class="comment-header">
								<text class="comment-author"
									@click="goToDesignerProfile(comment.uid)">{{ comment.common_nickname }}</text>
								<view class="like-btn" @click="likeComment(comment)">
									<image
										:src="comment.userLike ? '/static/base/index/good-active.png' : '/static/base/index/good.png'"
										class="like-icon" mode="aspectFit" />
									<text class="like-count">{{ comment.likeNum }}</text>
								</view>
							</view>

							<text class="comment-text">{{ comment.comment }}</text>

							<view class="comment-footer">
								<text class="comment-time">{{ comment.add_time }}</text>
								<text class="reply-btn" @click="startReply(comment)">回复</text>
							</view>

							<view v-if="comment.replyTotal > 0" class="reply-list">
								<view v-if="comment.showReplies" class="replies-container">
									<view v-for="(reply, rIndex) in comment.replies" :key="reply.id" class="reply-item">
										<image :src="reply.common_avatar" class="reply-avatar" mode="aspectFill" />
										<view class="reply-content">
											<view class="reply-header">
												<text class="reply-author">{{ reply.common_nickname }}</text>
												<view class="like-btn" @click="likeComment(reply)">
													<image
														:src="reply.userLike ? '/static/base/index/good-active.png' : '/static/base/index/good.png'"
														class="like-icon" mode="aspectFit" />
													<text class="like-count">{{ reply.likeNum }}</text>
												</view>
											</view>
											<text class="reply-text">{{ reply.comment }}</text>
											<view class="reply-footer">
												<text class="reply-time">{{ reply.add_time }}</text>
												<text class="reply-btn" @click="startReply(reply)">回复</text>
											</view>
										</view>
									</view>
									<view class="collapse-replies">
										<text class="collapse-text" @click="collapseReplies(comment)">
											- - - 收起回复 - - -
										</text>
									</view>
								</view>

								<view v-else class="expand-replies">
									<text class="expand-text" @click="loadReplies(comment, index)">
										- - - 展开{{ comment.replyTotal }}条回复 - - -
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 相关设计（关联作品） -->
			<view v-if="relatedWorks.length > 0" class="related-section">
				<view class="section-title">
					<text class="title-text">
						- - - 相关设计 - - -
					</text>
				</view>
				<view class="works-list">
					<view v-for="(work, index) in relatedWorks" :key="index" class="work-item"
						@click="goToWorkDetail(work.id)">
						<image :src="work.avatar" class="user-avatar" mode="aspectFill" />
						<view class="more-work-info">
							<view class="work-header" style="display: flex;justify-content: space-between;">
								<view class="username">
									{{ work.nickname }}
									<!-- 根据实际数据结构，这里可能需要调整，原参考代码中的身份标识逻辑 -->
									<!-- <text v-if="work.identity==2" class="identity-title">设计师</text> -->
									<!-- <text v-if="work.identity!=2 & work.work_level == 0">创作者</text> -->
									<!-- <image v-if="work.identity != 2 & work.work_level > 0" class="mvp-img" :src="'/static/base/user-center/level/' + work.levelImg"> -->
								</view>
								<view class="work-add_time">{{ work.draft_time }}</view>
							</view>
							<text class="work-content">{{ work.content }}</text>
							<view v-if="work.images && work.images.length > 0" class="work-images">
								<image @tap.native.stop="previewImages(work.images)"
									v-for="(img, imgIndex) in work.images" :key="imgIndex" :src="img" class="work-thumb"
									mode="aspectFill" />
							</view>
							<view v-else class="work-images">
								<image :src="emptyImg" class="work-thumb" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 相关商品（多个） -->
			<view v-if="productList.length > 0" class="product-section">
				<view class="section-title">
					<text class="title-text">
						- - - 相关商品 - - -
					</text>
				</view>
				<view class="product-list">
					<view v-for="(product, index) in productList" :key="index" class="product-card"
						@click="goToProductDetail(product.storeInfo.id)">
						<image :src="product.storeInfo.image" class="product-image" mode="aspectFill" />
						<view class="product-info">
							<text class="product-name">{{ product.storeInfo.store_name }}</text>
							<view
								style="display: flex; justify-content: space-between; align-items: center; margin-top: 10rpx;">
								<text class="product-price">¥{{ product.storeInfo.price }}</text>
								<view v-if="userInfo.identity != 2" class="product-action">
									<text class="buy-btn">去抢购</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</scroll-view>

		<!-- 评论/回复输入区域 -->
		<view class="comment-input-section" :class="{ 'focused': isInputActive }">
			<text v-if="replyTo" class="cancel-btn" @click="cancelReply">取消</text>

			<input v-model="commentText" :placeholder="inputPlaceholder" :cursor-spacing="10" :focus="isInputFocused"
				:adjust-position="true" class="main-input" @focus="handleInputFocus" @blur="handleInputBlur"
				@confirm="submitComment" />

			<button v-if="isInputActive" class="send-btn" @click="submitComment">发送</button>

			<view v-if="!isInputActive && !replyTo" class="stats-section">
				<view class="stat-item" @click="toggleLike">
					<image
						:src="workDetail.userLike ? '/static/base/index/good-active.png' : '/static/base/index/good.png'"
						class="stat-icon" mode="aspectFit" />
					<text class="stat-text">{{ workDetail.likeNum }}</text>
				</view>
				<view class="stat-item">
					<image src="/static/base/index/comment.png" class="stat-icon" mode="aspectFit" />
					<text class="stat-text">{{ workDetail.replyNum }}</text>
				</view>
				<view class="stat-item">
					<button class="share-btn-small" size="mini" open-type="share" hover-class="none"
						style="display: flex; align-items: center; gap: 10rpx; padding: 0; background: transparent; border: none;">
						<image src="/static/base/index/transpond.png" class="stat-icon" mode="aspectFit" />
						<text class="stat-text">转发</text>
					</button>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWorkDetail,
		getCommonList,
		workLikeAdd,
		workLikeDel,
		followUser,
		cancelFollowUser,
		sendCommentWork,
		replyComment as apiReplyComment,
		commentLikeAdd,
		commentLikeDel,
		shareWork,
		getDrafRelation,
		setWantValue
	} from '@/api/base/index.js'

	import {
		getProductDetail
	} from '@/api/store.js'

	import {
		HTTP_REQUEST_URL
	} from '@/config/app';

	import Cache from '@/utils/cache';
	import {
		getBaseUserInfo
	} from '@/api/base/user-center'; // 注意：新接口无参数
	import {
		UID
	} from '@/config/cache';
	import {
		mapGetters
	} from 'vuex'


	export default {
		data() {
			return {
				userInfo: {
					identity: 1, //用户身份， 默认为创作者
				},
				currentUId: '',
				emptyImg: HTTP_REQUEST_URL + '/statics/images/no-thing.png',
				safeTop: 0,
				contentTop: 0,
				workId: '',
				workType: '1',
				commentText: '',
				replyTo: null,
				imageHeights: [],
				isInputActive: false,
				isInputFocused: false,
				swiperHeight: 400, // 初始高度
				workDetail: {
					id: 0,
					title: '',
					content: '',
					images: [],
					add_time: '',
					uid: 0,
					nickname: '',
					avatar: '',
					likeNum: 0,
					userLike: false,
					replyNum: 0,
					userFollow: false
				},
				commentList: [],
				commentTotal: 0,
				displayImages: [],
				imagesLoaded: false,
				page: 1,
				limit: 10,
				// 新增：相关设计列表
				relatedWorks: [],
				// 新增：相关商品详情列表
				productList: []
			}
		},
		computed: {
			...mapGetters(['isLogin']),
			inputPlaceholder() {
				if (this.replyTo) {
					return `回复 @${this.replyTo.common_nickname}：`;
				}
				return '说点什么...';
			}
		},
		onShareAppMessage() {

			// 先调用分享上报接口
			this.reportShare();

			if(Number(this.workType)==1){
				return {
					title: `好友向您分享了一个共创作品"${this.workDetail.title}"` || '好友向您分享了一个共创作品',
					path: `/pages/sub_base/creative-detail/index?id=${this.workId}&workType=1`,
					imageUrl: this.displayImages[0] || this.emptyImg
				};
			}else{
				return {
					title: `好友向您分享了一个设计作品"${this.workDetail.title}"` || '好友向您分享了一个设计作品',
					path: `/pages/sub_base/creative-detail/index?id=${this.workId}&workType=2`,
					imageUrl: this.displayImages[0] || this.emptyImg
				};
			}
		},
		onShareTimeline() {

			// 同样调用分享上报
			this.reportShare();
			if(Number(this.workType)==1){
				return {
					title: `分享了一个共创作品"${this.workDetail.title}"` || '分享了一个共创作品',
					query: `id=${this.workId}&workType=1`,
					imageUrl: this.displayImages[0] || this.emptyImg
				};
			}
			if(Number(this.workType)==2){
				return {
					title: `分享了一个设计作品"${this.workDetail.title}"` || '分享了一个设计作品',
					query: `id=${this.workId}&workType=2`,
					imageUrl: this.displayImages[0] || this.emptyImg
				};
			}
		},
		onLoad(options) {
			this.workId = options.id || '1';
			this.workType = options.workType || '1'; //1为共创作品，2为稿件作品
			this.loadWorkDetail();
			this.loadComments();

			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop;
			this.contentTop = barTop + 44;
			this.currentUId = Cache.get(UID);
			if (this.isLogin) {
				this.getUserInfo(); // 调用无参接口
			}
		},
		onShow() {

		},
		methods: {
			getUserInfo() {
				// 新接口无需传参
				getBaseUserInfo().then(res => {
					const cacheUserInfo = res.data;
					this.userInfo = cacheUserInfo
				}).catch(err => {
					console.log('获取用户信息失败', err);
					// 可选：失败时重置或提示
				});
			},
			goBack() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.redirectTo({
						url: '/pages/base/user-center/index'
					});
				}
			},
			goToDesignerProfile(uid) {
				uni.navigateTo({
					url: `/pages/sub_base/designer-profile/index?id=${uid}`
				})
			},
			async setWant(want) {
				console.log(this.workDetail.id,Number(this.workType),want)
				try {
					const res = await setWantValue(this.workDetail.id,Number(this.workType),want);
					console.log(res)
					if (res.status == 200) {
						this.workDetail.userWant = want
					} else {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},
			
			async reportShare() {
				try {
					await shareWork(this.workId, 1);
					console.log('分享上报成功');
				} catch (error) {
					console.error('分享上报失败:', error);
					// 通常不上报失败也不影响用户体验，可静默处理
				}
			},
			async loadWorkDetail() {
				try {
					const res = await getWorkDetail(this.workId, this.workType);
					if (res.status === 200 && res.data) {
						let images = Array.isArray(res.data.images) ? res.data.images : [res.data.images || ''];
						images = images.filter(img => img && img.trim());
						this.displayImages = images.length > 0 ? images : [this.emptyImg];
						this.imageHeights = new Array(this.displayImages.length).fill(0);
						this.imagesLoaded = true;
						this.workDetail = {
							...res.data,
							images
						};

						//加载成功后再获取关联内容
						// 页面每次显示时都重新加载相关数据，确保最新
						if (this.workType == 1) {
							this.loadRelatedWorks();
						} else {
							this.loadProductDetail(res.data.productIds);
						}


					} else {
						this.displayImages = [this.emptyImg];
						this.imageHeights = [400];
						this.swiperHeight = 400;
						this.imagesLoaded = true;
						uni.showToast({
							title: '作品详情加载失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('获取作品详情失败', err);
					this.displayImages = [this.emptyImg];
					this.imageHeights = [400];
					this.swiperHeight = 400;
					this.imagesLoaded = true;
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			async loadComments() {
				try {
					const res = await getCommonList(this.workId, '', this.page, this.limit, this.workType);
					if (res.status === 200 && res.data && Array.isArray(res.data.list)) {
						this.commentList = res.data.list.map(comment => ({
							...comment,
							common_avatar: comment.common_avatar && comment.common_avatar.trim() !== '' ?
								comment.common_avatar : '/static/images/f.png',
							common_nickname: comment.common_nickname && comment.common_nickname.trim() !==
								'' ?
								comment.common_nickname : '暂无昵称',
							replies: [],
							showReplies: false,
							loadingReplies: false
						}));
						this.commentTotal = res.data.count || res.data.list.length;
					} else {
						uni.showToast({
							title: '评论加载失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('获取评论列表失败', err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			async loadReplies(comment, index) {
				if (comment.loadingReplies || comment.showReplies) return;
				this.$set(comment, 'loadingReplies', true);
				try {
					console.log('----this.workType-----', this.workType)
					const res = await getCommonList(this.workId, comment.id, 1, 999, this.workType);
					if (res.status === 200 && res.data && Array.isArray(res.data.list)) {
						this.$set(comment, 'replies', res.data.list);
						this.$set(comment, 'showReplies', true);
					} else {
						uni.showToast({
							title: '加载回复失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('加载回复失败', err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				} finally {
					this.$set(comment, 'loadingReplies', false);
				}
			},

			collapseReplies(comment) {
				this.$set(comment, 'showReplies', false);
			},

			async toggleLike() {
				const wasLiked = this.workDetail.userLike;
				this.workDetail.userLike = !wasLiked;
				this.workDetail.likeNum += wasLiked ? -1 : 1;
				try {
					const api = wasLiked ? workLikeDel : workLikeAdd;
					const res = await api(this.workId, this.workType);
					if (res.status !== 200) {
						this.workDetail.userLike = wasLiked;
						this.workDetail.likeNum -= wasLiked ? -1 : 1;
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				} catch (err) {
					this.workDetail.userLike = wasLiked;
					this.workDetail.likeNum -= wasLiked ? -1 : 1;
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			async toggleFollow() {
				const wasFollowing = this.workDetail.userFollow;
				this.workDetail.userFollow = !wasFollowing;
				try {
					const api = wasFollowing ? cancelFollowUser : followUser;
					const res = await api(this.workDetail.uid);
					if (res.status !== 200) {
						this.workDetail.userFollow = wasFollowing;
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: wasFollowing ? '已取消关注' : '已关注',
							icon: 'success'
						});
					}
				} catch (err) {
					this.workDetail.userFollow = wasFollowing;
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			async likeComment(comment) {
				const wasLiked = comment.userLike;
				comment.userLike = !wasLiked;
				comment.likeNum += wasLiked ? -1 : 1;
				try {
					const api = wasLiked ? commentLikeDel : commentLikeAdd;
					const res = await api(comment.id);
					if (res.status !== 200) {
						comment.userLike = wasLiked;
						comment.likeNum -= wasLiked ? -1 : 1;
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				} catch (err) {
					comment.userLike = wasLiked;
					comment.likeNum -= wasLiked ? -1 : 1;
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			startReply(comment) {
				this.replyTo = {
					id: comment.id,
					common_nickname: comment.common_nickname
				};
				this.commentText = '';
				this.isInputActive = true;
				this.isInputFocused = false;
				setTimeout(() => {
					this.isInputFocused = true;
				}, 200);
			},

			cancelReply() {
				this.replyTo = null;
				this.commentText = '';
				this.isInputFocused = false;
				setTimeout(() => {
					if (!this.replyTo && !this.commentText.trim()) {
						this.isInputActive = false;
					}
				}, 150);
			},

			handleInputFocus() {
				this.isInputActive = true;
				this.isInputFocused = true;
			},

			handleInputBlur() {
				this.isInputFocused = false;
				setTimeout(() => {
					if (!this.commentText.trim() && !this.replyTo) {
						this.isInputActive = false;
					}
				}, 150);
			},

			async submitComment() {
				if (!this.commentText.trim()) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				try {
					let res;
					if (this.replyTo) {
						res = await apiReplyComment(this.replyTo.id, this.commentText);
					} else {
						res = await sendCommentWork(this.workId, this.commentText, this.workType);
					}
					if (res.status === 200) {
						uni.showToast({
							title: '发送成功',
							icon: 'success'
						});
						this.commentText = '';
						this.replyTo = null;
						this.isInputActive = false;
						this.isInputFocused = false;
						this.loadComments();
						this.loadWorkDetail()
					} else {
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('发送评论失败', err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				}
			},

			// 关键：准确计算图片高度
			onImageLoad(e, index) {
				const {
					width: imgWidth,
					height: imgHeight
				} = e.detail;
				if (!imgWidth || !imgHeight) {
					this.$set(this.imageHeights, index, 400);
					return;
				}

				const query = uni.createSelectorQuery().in(this);
				query.select('.work-swiper').boundingClientRect(res => {
					let containerWidthPx = res?.width || 0;
					if (containerWidthPx <= 0) {
						const sys = uni.getSystemInfoSync();
						containerWidthPx = sys.windowWidth;
					}

					const scale = containerWidthPx / imgWidth;
					const displayHeightPx = imgHeight * scale;

					const sys = uni.getSystemInfoSync();
					const rpx = (displayHeightPx / sys.windowWidth) * 750;

					this.$set(this.imageHeights, index, rpx);

					const validHeights = this.imageHeights.filter(h => h > 0);
					const maxHeight = validHeights.length > 0 ? Math.max(...validHeights) : 400;
					this.swiperHeight = Math.min(maxHeight, 1800);
				}).exec();
			},

			onImageError(index) {
				this.$set(this.imageHeights, index, 400);
				const maxHeight = Math.max(...this.imageHeights, 400);
				this.swiperHeight = Math.min(maxHeight, 1200);
			},

			// 新增方法：加载相关设计（关联作品）
			async loadRelatedWorks() {
				if (!this.workId) return;
				try {
					const res = await getDrafRelation(this.workId, 1, 6); // 获取前6条
					if (res.status === 200 && res.data && res.data.list && Array.isArray(res.data.list)) {
						this.relatedWorks = res.data.list.map(item => ({
							...item,
							// 如果后端返回的图片是字符串，转换为数组
							images: typeof item.images === 'string' ? [item.images] : item.images
						}));
					} else {
						this.relatedWorks = [];
						console.log('获取相关设计列表失败');
					}
				} catch (err) {
					console.error('加载相关设计失败:', err);
					this.relatedWorks = [];
				}
			},

			// 循环 加载相关商品
			async loadProductDetail(productIdsStr) {
				if (!productIdsStr) {
					this.productList = [];
					return;
				}

				const ids = productIdsStr
					.split(',')
					.map(id => id.trim())
					.filter(id => id && !isNaN(id));

				if (ids.length === 0) {
					this.productList = [];
					return;
				}

				// 并发请求所有商品，即使部分失败也不影响其他
				const promises = ids.map(id => getProductDetail(id));
				const results = await Promise.allSettled(promises);

				const validProducts = [];
				for (let i = 0; i < results.length; i++) {
					if (results[i].status === 'fulfilled') {
						const res = results[i].value;
						if (res.status === 200 && res.data) {
							validProducts.push(res.data);
						}
					} else {
						console.warn(`商品 ID ${ids[i]} 加载失败:`, results[i].reason);
					}
				}

				this.productList = validProducts;
			},

			// 新增方法：预览图片
			previewImages(imgs) {
				uni.previewImage({
					urls: imgs
				});
			},

			// 新增方法：跳转到作品详情页
			goToWorkDetail(id) {
				uni.navigateTo({
					url: `/pages/sub_base/creative-detail/index?id=${id}&workType=2`
				})
			},

			// 新增方法：跳转到商品详情页
			goToProductDetail(productId) {
				console.log(this.userInfo.identity)
				if(Number(this.userInfo.identity) != 2){
					uni.navigateTo({
						url: `/pages/goods_details/index?id=${productId}`
					})
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		z-index: 100;
	}

	.header-left {
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.author-section {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.author-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 48rpx;
		margin-right: 14rpx;
	}

	.author-name {
		font-size: 32rpx;
		color: #505050;
		display: block;
	}

	.follow-btn,
	.followed-btn {
		padding: 2rpx 32rpx;
		border-radius: 40rpx;
		margin-left: 16rpx;
	}

	.follow-btn {
		background-color: rgb(241, 144, 96);
	}

	.followed-btn {
		background-color: #fff;
		border: 2rpx solid #d6d6d6;
		align-items: center;
	}

	.follow-text {
		font-size: 28rpx;
		color: #ffffff;
	}

	.followed-text {
		font-size: 28rpx;
		color: #000000;
	}

	.content {
		padding-bottom: 120rpx;
		/* 留出输入框空间 */
	}

	.work-section {
		background-color: #ffffff;
		margin-bottom: 16rpx;
		padding: 0;
		/* 关键：无内边距 */
	}

	.work-swiper {
		width: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
		/* height 由 JS 动态设置 */
	}

	.swiper-item-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.work-image {
		width: 100%;
		display: block;
		/* 不要设置 height / max-height / object-fit */
	}

	.work-swiper-placeholder {
		width: 100%;
		height: 900rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		font-size: 28rpx;
		background-color: #f5f5f5;
	}

	.more-work-info {
		padding: 0 20rpx;
		width: 100%;
	}

	.work-title {
		font-size: 38rpx;
		font-weight: 500;
		color: #333333;
		display: block;
		margin-bottom: 24rpx;
	}

	.work-description {
		text-indent: 2em;
		font-size: 28rpx;
		color: #9f9f9f;
		line-height: 1.6;
		display: block;
		margin-bottom: 20rpx;
	}

	.work-time {
		font-size: 24rpx;
		color: #999999;
	}

	.comments-section {
		background-color: #ffffff;
		padding: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 32rpx;
	}

	.comment-list {
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.comment-item {
		display: flex;
		gap: 24rpx;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.comment-avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.comment-author {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}

	.like-btn {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.like-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.like-count {
		font-size: 24rpx;
		color: #999999;
	}

	.comment-text {
		font-size: 28rpx;
		color: #666666;
		line-height: 1.5;
		display: block;
		margin-bottom: 16rpx;
	}

	.comment-footer {
		display: flex;
		align-items: center;
		gap: 24rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.comment-time {
		color: #999999;
	}

	.reply-btn {
		color: #212121;
	}

	.reply-list {
		margin-top: 24rpx;
	}

	.reply-item {
		display: flex;
		gap: 16rpx;
		padding: 16rpx 0;
		border-top: 1rpx dashed #ddd;
	}

	.reply-avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 28rpx;
	}

	.reply-content {
		flex: 1;
	}

	.reply-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.reply-author {
		font-size: 26rpx;
		font-weight: 600;
		color: #333333;
	}

	.reply-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
		display: block;
		margin-bottom: 12rpx;
	}

	.reply-footer {
		display: flex;
		align-items: center;
		gap: 24rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.reply-time {
		color: #999999;
	}

	.collapse-replies,
	.expand-replies {
		margin-top: 16rpx;
		text-align: center;
	}

	.collapse-text,
	.expand-text {
		margin-right: 104rpx;
		font-size: 24rpx;
		color: #55aaff;
	}

	.comment-input-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #eee;
		padding: 20rpx 32rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		z-index: 100;
	}

	.cancel-btn {
		font-size: 28rpx;
		color: #999999;
		padding: 0 10rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.main-input {
		flex: 1;
		height: 60rpx;
		background-color: #f5f5f5;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.send-btn {
		width: 120rpx;
		height: 60rpx;
		background-color: #f19060;
		color: white;
		border-radius: 30rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
	}

	.stats-section {
		display: flex;
		gap: 34rpx;
		margin-left: auto;
	}

	/* 	.share-button {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		background: transparent;
		border: none;
		z-index: 1;
	} */

	.share-btn-small {
		padding: 0 !important;
		margin: 0 !important;
		line-height: 1;
	}

	.stat-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.stat-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.stat-text {
		font-size: 28rpx;
		color: #666666;
	}

	/* 相关设计样式 */
	.related-section {
		background-color: #F2F8FC;
		padding: 20.82rpx;
		margin-top: 10rpx;
	}

	.section-title {
		text-align: center;
		margin-bottom: 27.76rpx;
	}

	.title-text {
		font-size: 27.76rpx;
		font-weight: 600;
		color: #333333;
	}

	.works-list {
		margin-top: -26.025rpx;
	}

	.work-item {
		display: flex;
		align-items: flex-start;
		padding: 27.76rpx 0;
		border-bottom: 1.735rpx solid #f5f5f5;
	}

	.work-item:last-child {
		border-bottom: none;
	}

	.user-avatar {
		width: 69.4rpx;
		height: 69.4rpx;
		border-radius: 50%;
		margin-right: 20.82rpx;
		flex-shrink: 0;
	}

	.work-info {
		padding: 20rpx 30rpx;
		flex: 1;
		overflow-x: auto;
		/* 允许横向滚动 */
		min-width: 0;
		/* 防止 flex 布局下子元素撑开父容器 */
	}

	.work-header {
		margin-bottom: 6.94rpx;
	}

	.username {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.work-content {
		font-size: 20.82rpx;
		color: #666666;
		line-height: 1.4;
		margin-bottom: 4rpx;
		display: -webkit-box;
		/* 必须设置为 -webkit-box */
		-webkit-box-orient: vertical;
		/* 设置子元素排列方式为垂直 */
		-webkit-line-clamp: 2;
		/* 限制显示 2 行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;
		/* 配合使用，虽然多行时主要靠 -webkit-line-clamp */
	}

	.work-images {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		/* 关键：禁止换行 */
		gap: 6.94rpx;
		margin-bottom: 13.88rpx;
		overflow-x: auto;
		padding: 6.94rpx 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.work-images::-webkit-scrollbar {
		display: none;
	}

	.work-thumb {
		width: 156.15rpx;
		height: 156.15rpx;
		border-radius: 6.94rpx;
		flex-shrink: 0;
	}

	.more-images {
		width: 104.1rpx;
		height: 104.1rpx;
		border-radius: 6.94rpx;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.more-text {
		font-size: 20.82rpx;
		color: #ffffff;
	}

	.work-add_time {
		float: right;
		font-size: 20.82rpx;
		color: #999999;
	}

	/* 相关商品样式（多个） */
	.product-section {
		background-color: #F2F8FC;
		padding: 20.82rpx;
		margin-top: 20rpx;
	}

	.product-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		/* 商品卡片之间的间距 */
	}

	.product-card {
		display: flex;
		background-color: #ffffff;
		overflow: hidden;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	.product-image {
		width: 220rpx;
		height: 220rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
	}

	.product-info {
		flex: 1;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-price {
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
	}

	.product-action {
		display: flex;
		justify-content: flex-end;
	}

	.buy-btn {
		background-color: #F19060;
		color: #ffffff;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
</style>